<template>
  <div class="environment-monitor">
    <!-- 实时数据卡片 -->
    <div class="realtime-cards">
      <el-card 
        v-for="sensor in sensors" 
        :key="sensor.id" 
        class="sensor-card"
        :class="sensor.status"
      >
        <div class="sensor-content">
          <div class="sensor-icon" :style="{ backgroundColor: sensor.color }">
            <el-icon><component :is="sensor.icon" /></el-icon>
          </div>
          <div class="sensor-info">
            <div class="sensor-name">{{ sensor.name }}</div>
            <div class="sensor-value">{{ sensor.value }}</div>
            <div class="sensor-unit">{{ sensor.unit }}</div>
          </div>
          <div class="sensor-status">
            <el-tag :type="sensor.status === 'normal' ? 'success' : 'danger'" size="small">
              {{ sensor.status === 'normal' ? '正常' : '异常' }}
            </el-tag>
          </div>
        </div>
        <div class="sensor-trend">
          <span class="trend-label">24h变化:</span>
          <span class="trend-value" :class="sensor.trend">
            {{ sensor.trend === 'up' ? '+' : '' }}{{ sensor.change }}
          </span>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <el-icon><TrendCharts /></el-icon>
            <span>环境数据趋势</span>
            <div class="chart-controls">
              <el-select v-model="selectedTimeRange" size="small" style="width: 120px">
                <el-option label="24小时" value="24h" />
                <el-option label="7天" value="7d" />
                <el-option label="30天" value="30d" />
              </el-select>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="trendChartOption" style="height: 400px" />
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <el-icon><PieChart /></el-icon>
            <span>数据分布</span>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="distributionChartOption" style="height: 400px" />
        </div>
      </el-card>
    </div>

    <!-- 报警信息和设备状态 -->
    <div class="bottom-section">
      <el-card class="alarm-card">
        <template #header>
          <div class="card-header">
            <el-icon><Warning /></el-icon>
            <span>报警信息</span>
            <el-badge :value="activeAlarms.length" class="alarm-badge" />
          </div>
        </template>
        <div class="alarm-list">
          <div 
            v-for="alarm in activeAlarms" 
            :key="alarm.id" 
            class="alarm-item"
            :class="alarm.level"
          >
            <div class="alarm-icon">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="alarm-content">
              <div class="alarm-title">{{ alarm.title }}</div>
              <div class="alarm-desc">{{ alarm.description }}</div>
              <div class="alarm-time">{{ alarm.time }}</div>
            </div>
            <div class="alarm-actions">
              <el-button size="small" @click="acknowledgeAlarm(alarm)">确认</el-button>
              <el-button size="small" type="danger" @click="resolveAlarm(alarm)">处理</el-button>
            </div>
          </div>
          <div v-if="activeAlarms.length === 0" class="no-alarms">
            暂无报警信息
          </div>
        </div>
      </el-card>

      <el-card class="device-card">
        <template #header>
          <div class="card-header">
            <el-icon><Setting /></el-icon>
            <span>设备状态</span>
          </div>
        </template>
        <div class="device-list">
          <div 
            v-for="device in devices" 
            :key="device.id" 
            class="device-item"
            :class="device.status"
          >
            <div class="device-icon">
              <el-icon><component :is="device.icon" /></el-icon>
            </div>
            <div class="device-info">
              <div class="device-name">{{ device.name }}</div>
              <div class="device-location">{{ device.location }}</div>
              <div class="device-status">{{ device.statusText }}</div>
            </div>
            <div class="device-controls">
              <el-switch 
                v-model="device.online" 
                @change="toggleDevice(device)"
                :disabled="device.status === 'offline'"
              />
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 历史数据查询 -->
    <el-card class="history-card">
      <template #header>
        <div class="card-header">
          <el-icon><Document /></el-icon>
          <span>历史数据查询</span>
        </div>
      </template>
      <div class="history-form">
        <el-form :inline="true" :model="historyForm">
          <el-form-item label="传感器">
            <el-select v-model="historyForm.sensor" placeholder="选择传感器">
              <el-option 
                v-for="sensor in sensors" 
                :key="sensor.id" 
                :label="sensor.name" 
                :value="sensor.id" 
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="historyForm.dateRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryHistory">查询</el-button>
            <el-button @click="exportHistory">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="historyData.length > 0" class="history-table">
        <el-table :data="historyData" style="width: 100%">
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="sensor" label="传感器" width="120" />
          <el-table-column prop="value" label="数值" width="100" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="row.status === 'normal' ? 'success' : 'danger'" size="small">
                {{ row.status === 'normal' ? '正常' : '异常' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: 'EnvironmentMonitor',
  components: {
    VChart
  },
  data() {
    return {
      selectedTimeRange: '24h',
      historyForm: {
        sensor: '',
        dateRange: []
      },
      sensors: [
        {
          id: 1,
          name: '温度',
          value: 25.6,
          unit: '°C',
          status: 'normal',
          icon: 'Thermometer',
          color: '#F56C6C',
          trend: 'up',
          change: 2.1
        },
        {
          id: 2,
          name: '湿度',
          value: 68,
          unit: '%',
          status: 'normal',
          icon: 'WaterDrop',
          color: '#409EFF',
          trend: 'down',
          change: 1.5
        },
        {
          id: 3,
          name: '土壤湿度',
          value: 45,
          unit: '%',
          status: 'warning',
          icon: 'Soil',
          color: '#E6A23C',
          trend: 'down',
          change: 5.2
        },
        {
          id: 4,
          name: '光照强度',
          value: 850,
          unit: 'lux',
          status: 'normal',
          icon: 'Sunny',
          color: '#F7BA2A',
          trend: 'up',
          change: 120
        },
        {
          id: 5,
          name: 'CO2浓度',
          value: 420,
          unit: 'ppm',
          status: 'normal',
          icon: 'Wind',
          color: '#67C23A',
          trend: 'up',
          change: 15
        },
        {
          id: 6,
          name: 'pH值',
          value: 6.8,
          unit: '',
          status: 'normal',
          icon: 'TestTube',
          color: '#909399',
          trend: 'stable',
          change: 0.1
        }
      ],
      activeAlarms: [
        {
          id: 1,
          title: '土壤湿度过低',
          description: 'A区土壤湿度低于阈值，建议立即灌溉',
          time: '2024-01-15 14:30',
          level: 'warning'
        },
        {
          id: 2,
          title: '温度传感器异常',
          description: 'B区温度传感器数据异常，请检查设备',
          time: '2024-01-15 13:45',
          level: 'error'
        }
      ],
      devices: [
        {
          id: 1,
          name: '温度传感器',
          location: 'A区',
          status: 'online',
          statusText: '在线',
          icon: 'Thermometer',
          online: true
        },
        {
          id: 2,
          name: '湿度传感器',
          location: 'B区',
          status: 'online',
          statusText: '在线',
          icon: 'WaterDrop',
          online: true
        },
        {
          id: 3,
          name: '灌溉系统',
          location: 'C区',
          status: 'offline',
          statusText: '离线',
          icon: 'WaterDrop',
          online: false
        },
        {
          id: 4,
          name: '光照传感器',
          location: 'D区',
          status: 'online',
          statusText: '在线',
          icon: 'Sunny',
          online: true
        }
      ],
      historyData: []
    }
  },
  computed: {
    trendChartOption() {
      return {
        title: {
          text: '环境数据趋势图',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['温度', '湿度', '土壤湿度', '光照'],
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: [
          {
            type: 'value',
            name: '温度(°C)/湿度(%)',
            position: 'left'
          },
          {
            type: 'value',
            name: '光照(lux)',
            position: 'right'
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            data: [22, 23, 25, 28, 26, 24, 23],
            smooth: true,
            lineStyle: { color: '#F56C6C' },
            itemStyle: { color: '#F56C6C' }
          },
          {
            name: '湿度',
            type: 'line',
            data: [75, 72, 68, 65, 70, 73, 75],
            smooth: true,
            lineStyle: { color: '#409EFF' },
            itemStyle: { color: '#409EFF' }
          },
          {
            name: '土壤湿度',
            type: 'line',
            data: [50, 48, 45, 42, 45, 47, 50],
            smooth: true,
            lineStyle: { color: '#E6A23C' },
            itemStyle: { color: '#E6A23C' }
          },
          {
            name: '光照',
            type: 'line',
            yAxisIndex: 1,
            data: [0, 0, 200, 800, 600, 100, 0],
            smooth: true,
            lineStyle: { color: '#F7BA2A' },
            itemStyle: { color: '#F7BA2A' }
          }
        ]
      }
    },
    distributionChartOption() {
      return {
        title: {
          text: '数据分布统计',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 0
        },
        series: [
          {
            name: '传感器状态',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 4, name: '正常', itemStyle: { color: '#67C23A' } },
              { value: 1, name: '警告', itemStyle: { color: '#E6A23C' } },
              { value: 1, name: '异常', itemStyle: { color: '#F56C6C' } }
            ]
          }
        ]
      }
    }
  },
  methods: {
    acknowledgeAlarm(alarm) {
      const index = this.activeAlarms.findIndex(a => a.id === alarm.id)
      if (index > -1) {
        this.activeAlarms.splice(index, 1)
        this.$message.success('报警已确认')
      }
    },
    
    resolveAlarm(alarm) {
      const index = this.activeAlarms.findIndex(a => a.id === alarm.id)
      if (index > -1) {
        this.activeAlarms.splice(index, 1)
        this.$message.success('报警已处理')
      }
    },
    
    toggleDevice(device) {
      device.statusText = device.online ? '在线' : '离线'
      device.status = device.online ? 'online' : 'offline'
      this.$message.success(`${device.name} ${device.online ? '已启用' : '已禁用'}`)
    },
    
    queryHistory() {
      // 模拟历史数据查询
      this.historyData = [
        {
          time: '2024-01-15 14:00:00',
          sensor: '温度传感器',
          value: '25.6',
          unit: '°C',
          status: 'normal'
        },
        {
          time: '2024-01-15 13:00:00',
          sensor: '温度传感器',
          value: '25.2',
          unit: '°C',
          status: 'normal'
        },
        {
          time: '2024-01-15 12:00:00',
          sensor: '温度传感器',
          value: '24.8',
          unit: '°C',
          status: 'normal'
        }
      ]
      this.$message.success('历史数据查询完成')
    },
    
    exportHistory() {
      this.$message.success('历史数据导出功能开发中...')
    }
  }
}
</script>

<style scoped>
.environment-monitor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.realtime-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sensor-card {
  height: 140px;
  transition: all 0.3s;
}

.sensor-card.warning {
  border-left: 4px solid #E6A23C;
}

.sensor-card.error {
  border-left: 4px solid #F56C6C;
}

.sensor-content {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.sensor-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 20px;
}

.sensor-info {
  flex: 1;
}

.sensor-name {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.sensor-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.sensor-unit {
  font-size: 12px;
  color: #909399;
}

.sensor-trend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.trend-label {
  color: #606266;
}

.trend-value.up {
  color: #67C23A;
}

.trend-value.down {
  color: #F56C6C;
}

.trend-value.stable {
  color: #909399;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-card {
  height: 500px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.chart-controls {
  margin-left: auto;
}

.chart-container {
  height: 100%;
}

.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* .alarm-card,
.device-card {
  height: 400px;
} */

.alarm-badge {
  margin-left: auto;
}

.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.alarm-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.alarm-item.warning {
  background: #fff3cd;
  border-left: 4px solid #E6A23C;
}

.alarm-item.error {
  background: #fef0f0;
  border-left: 4px solid #F56C6C;
}

.alarm-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #F56C6C;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.alarm-content {
  flex: 1;
}

.alarm-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.alarm-desc {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
}

.alarm-time {
  font-size: 12px;
  color: #909399;
}

.alarm-actions {
  display: flex;
  gap: 8px;
}

.no-alarms {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
 
}

.device-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  background: #f8f9fa;
  transition: all 0.3s;
}

.device-item.offline {
  background: #fef0f0;
  border-left: 4px solid #F56C6C;
}

.device-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #409EFF;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.device-info {
  flex: 1;
}

.device-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.device-location {
  font-size: 12px;
  color: #606266;
  margin-bottom: 4px;
}

.device-status {
  font-size: 12px;
  color: #909399;
}

.history-card {
  height: 400px;
}

.history-form {
  margin-bottom: 20px;
}

.history-table {
  max-height: 250px;
  overflow-y: auto;
}
</style> 